<template>
  <div>
    <form class="studentForm">
      <input v-model="formData.id" class="studentIdToEdit" type="hidden" />

      <label for="studentName">Name</label>
      <input v-model="formData.name" class="studentName" name="name" required type="text" />

      <label for="studentGender">Gender</label>
      <select v-model="formData.gender" class="studentGender" name="gender" required>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>

      <label for="studentHobbies">Hobbies</label>
      <input
        v-model="formData.hobbies"
        class="studentHobbies"
        name="hobbies"
        required
        type="text"
      />

      <label for="studentEmail">Email</label>
      <input v-model="formData.email" class="studentEmail" name="email" required type="email" />

      <label for="studentPhone">Phone</label>
      <input v-model="formData.phone" class="studentPhone" name="phone" required type="text" />

      <label for="studentAge">Age</label>
      <input v-model="formData.age" class="studentAge" name="age" required type="number" />

      <button class="saveStudentBtn" type="submit" @click.prevent="saveStuInfo">保存信息</button>
    </form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

export interface IStudent {
  id: string | number
  name: string
  gender: string
  hobbies: string
  email: string
  phone: string
  age: number | string
  create_at?: string
  update_at?: string
  seleted?: boolean
}

export type PIStudent = Partial<IStudent>

const { userInfo } = defineProps<{
  userInfo: IStudent
}>()

const emit = defineEmits<{
  (e: 'save', userInfo: IStudent): void
}>()

const formData = ref<PIStudent>(userInfo)

const saveStuInfo = () => {
  console.log(formData.value, 'formData.value')

  emit('save', formData.value as IStudent)
}

/**
 * 设置表单数据
 */
const setFormData = (data: IStudent) => {
  formData.value = data
}

/**
 * 重置表单数据
 */
const resetForm = () => {
  setFormData({
    id: '',
    age: '',
    email: '',
    gender: '',
    hobbies: '',
    name: '',
    phone: ''
  })
}

defineExpose({
  setFormData,
  resetForm
})
</script>

<style lang="scss" scoped>
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input,
select {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.saveStudentBtn {
  background-color: #4caf50;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  width: 100%;

  &:hover {
    background-color: #45a049;
  }
}
</style>
